HTML - tutorial - 29 - SVG - light source elements

revision:


Content

<feDistantLight> <fePointLight> <feSpotLight>


<feDistantLight>

top

is a child element of the filter primitives "feDiffuseLighting" or "feSpecularLighting. It defines a distant light source that can be used within a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting>.

create and add this object with the >method feDistantLight() of the filter primitives feDiffuseLighting or feSpecularLighting.

attributes: azimuth, elevation

example

codes:

                    <svg viewBox="0 0 440 200">
                        <filter id="distantLight1">
                            <feDiffuseLighting>
                                <feDistantLight azimuth="0" />
                            </feDiffuseLighting>
                        </filter>
                        <filter id="distantLight2">
                            <feDiffuseLighting>
                                <feDistantLight elevation="45" />
                            </feDiffuseLighting>
                        </filter>
                        <circle cx="100" cy="100" r="80" style="filter: url(#distantLight1);" />
                        <circle cx="100" cy="100" r="80" style="filter: url(#distantLight2);
                        transform: translateX(240px);" />
                    </svg>
                

<fePointLight>

top

is a child element of the filter primitives "feDiffuseLighting" or "feSpecularLighting". It defines a light source which allows to create a point light effect. It can be used within a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting>.

create and add this object with the method fePointLight() of the filter primitives feDiffuseLighting or feSpecularLighting.

attributes: x, y, z

example

codes:

                    <svg width="300" height="250">
                        <defs>
                            <filter id="spotlight">
                                <feSpecularLighting result="spotlight" specularConstant="1.5" specularExponent="80" 
                                lighting-color="#FFF">
                                    <fePointLight x="40" y="30" z="220"/>
                                </feSpecularLighting>
                                <feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1"
                                k3="1" k4="0"/>
                            </filter>
                        </defs>
                        <image href="smiley.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/>
                    </svg>
                

<feSpotLight>

top

is a child element of the filter primitives "feDiffuseLighting" or "feSpecularLighting". It defines a light source that can be used to create a spotlight effect. It is used within a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting>.

create and add this object with the method feSpotLight() of the filter primitives feDiffuseLighting or feSpecularLighting.

attributes: x, y, z, pointsAtX, pointsAtY, pointsAtZ, specularExponent, limitingConeAngle

example

codes:

                    <svg width="300" height="300">
                        <defs>
                            <filter id="spotlight_a">
                                <feSpecularLighting result="spotlight_a" specularConstant="1.5" specularExponent="4" 
                                lighting-color="#FFF">
                                    <feSpotLight x="600" y="600" z="400" limitingConeAngle="5.5" />
                                </feSpecularLighting>
                                <feComposite in="SourceGraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0"/>
                            </filter>
                        </defs>
                        <image href="smiley.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight_a);"/>
                    </svg>